import React, {JSX} from 'react';
import {View, Image, StyleSheet} from 'react-native';
import {BasicText} from '../text';
import {Item} from '../../screen/HistoryScreen/data';
import { normalize } from '../../utils/adapter';

type Props = {} & Item;

function Horizontal({cover, title, subtitle, episodesNum}: Props): JSX.Element {
  return (
    <View style={styles.container}>
      <Image source={cover} style={styles.cover} />
      <View style={styles.info}>
        <View>
          <BasicText fontSize={normalize(14)} color="#333333">{title}</BasicText>
          <View style={styles.subtitle}>
            <BasicText color="#FF7F39" fontSize={normalize(12)}>
              {subtitle}
            </BasicText>
          </View>
        </View>
        <View>
            <BasicText color="#999999" fontSize={normalize(12)}>{episodesNum}</BasicText>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    overflow:'hidden',
    flex:1,
  },
  cover: {
    width: normalize(57),
    height: normalize(80),
  },
  info:{
    marginLeft:normalize(8),
    justifyContent:'space-between',
    flex:1,
  },
  subtitle:{
    marginTop:normalize(10),
  },
});

export default React.memo(Horizontal);
